@charset "UTF-8";
html {
  font-size: 62.5%;
  font-family: "Microsoft yahei"; }

body,
textarea,
input,
select,
option {
  color: #333;
  font-family: "Hiragino Sans GB", "Microsoft Yahei", tahoma, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; }

body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
ol,
ul,
dl,
dd,
p,
textarea,
input,
select,
option,
form {
  margin: 0;
  padding: 0; }

ol,
ul,
textarea,
input,
option,
th,
td {
  padding: 0; }

.page {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 100%; }

a,
select,
input,
textarea {
  outline: none; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul,
ol {
  list-style-type: none; }

.hide {
  display: none; }

.show {
  display: block; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

.clear {
  clear: both;
  height: 0;
  overflow: hidden; }

/* ios默认文本框阴影 */
input[type="text"],
textarea {
  -webkit-appearance: none; }

/* 低版本安卓文本框层级问题 */
input:focus {
  -webkit-user-modify: read-write-plaintext-only; }

fieldset,
img {
  border: 0; }

a {
  text-decoration: none; }

a,
textarea,
input {
  outline: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

textarea {
  overflow: auto;
  resize: none; }

@media only screen and (min-width: 320px) {
  html {
    font-size: 75% !important;
    /* 12÷16=75% */ } }

/**
    62.5%   10px;
    640 150%    24px;
    320除以标准比例 640  再乘以 640的基数24  再除以  HTML 根据基数16
    320/640  * 24 / 16 = 75%;
    375/640  * 24 / 16 = 87.89%;
    414/640  * 24 / 16 = 97.03%
*/
@media only screen and (min-width: 360px) {
  html {
    font-size: 84.3% !important;
    /* 13.5÷16=84.3% */ } }

@media only screen and (min-width: 375px) {
  html {
    font-size: 87.890625% !important;
    /* 14.0625÷16=87.890625% */ } }

@media only screen and (min-width: 384px) {
  html {
    font-size: 90% !important;
    /* 14.4÷16=90% */ } }

@media only screen and (min-width: 390px) {
  html {
    font-size: 91.4% !important;
    /* 14.625÷16=91.4% */ } }

@media only screen and (min-width: 412px) {
  html {
    font-size: 96.56% !important;
    /* 15.45÷16=96.56% */ } }

@media only screen and (min-width: 414px) {
  html {
    font-size: 97.03% !important;
    /* 15.525÷16=97.03% */ } }

@media only screen and (min-width: 480px) {
  html {
    font-size: 112.5% !important;
    /* 18÷16=112.5% */ } }

@media only screen and (min-width: 560px) {
  html {
    font-size: 131.25% !important;
    /* 21÷16=131.25% */ } }

@media only screen and (min-width: 640px) {
  html {
    font-size: 150% !important;
    /* 24÷16=150% */ } }

@media only screen and (min-width: 720px) {
  html {
    font-size: 168.75% !important;
    /* 27÷16=168.75% */ } }

@media only screen and (min-width: 750px) {
  html {
    font-size: 175.78125% !important;
    /* 28.125÷16=175.78125% */ } }

.top {
  overflow: hidden; }
  .top .wrong {
    width: 2.27556rem;
    height: 2.27556rem;
    margin: 2.06222rem 0 3.41333rem 2.63111rem;
    background: url("./bg_img/wrong.png") no-repeat;
    background-size: 2.27556rem; }

.main {
  padding: 0 3.12889rem; }
  .main h2 {
    height: 3.55556rem;
    line-height: 3.55556rem;
    font-size: 2.20444rem;
    text-align: center;
    color: #fff; }
  .main .form li {
    height: 6.25778rem;
    display: block;
    box-sizing: border-box;
    border-bottom: 1px solid #5b9ef1; }
  .main .form .joy {
    display: block;
    color: #fff;
    font-size: 1.77778rem;
    text-indent: 1.13778rem;
    border: none;
    outline: none;
    background: transparent; }
  .main .form .user li {
    padding: 1.13778rem 0.14222rem 0 0; }
    .main .form .user li span {
      display: block;
      text-indent: 1.13778rem;
      height: 2.13333rem;
      line-height: 2.13333rem;
      font-size: 1.42222rem;
      color: #abc6f6; }
    .main .form .user li .inp {
      height: 2.27556rem; }
  .main .form .select li {
    padding: 2.84444rem 0.14222rem 0 0; }
    .main .form .select li select.sel {
      width: 100%;
      height: 2.56rem;
      line-height: 2.56rem;
      background-size: 1.63556rem 0.85333rem; }
  .main .form .btn input {
    width: 100%;
    height: 5.61778rem;
    background: #ffffff;
    font-size: 2.27556rem;
    color: #3a8cf2;
    border: none;
    outline: none;
    border-radius: 0.56889rem;
    margin-top: 4.97778rem; }
  .main .bto {
    margin: 5.12rem 0 2.41778rem; }
    .main .bto p {
      font-size: 1.49333rem;
      color: #1a60b8;
      text-align: center;
      height: 1.99111rem;
      line-height: 1.99111rem; }

.topBar {
  width: 100%;
  height: 3.12889rem;
  line-height: 3.12889rem;
  background: #ffffff;
  text-align: center;
  box-shadow: inset 0px -1px 0px 0px #eeeeee;
  position: fixed;
  top: 0;
  z-index: 100; }
  .topBar span {
    font-size: 1.28rem;
    color: #333333;
    letter-spacing: -0.97px;
    font-weight: bold; }
  .topBar i {
    position: absolute;
    display: block;
    width: 3.12889rem;
    height: 3.12889rem; }
    .topBar i.topBar_left {
      top: 0;
      left: 0;
      background: url("./bg_img/cuo.png") no-repeat center right;
      background-size: 1.13778rem 1.13778rem; }
    .topBar i.topBar_right {
      top: 0;
      right: 0;
      background: url("./bg_img/more.png") no-repeat center left;
      background-size: 80%; }

.logo {
  margin-top: 5.47556rem; }
  .logo img {
    width: 9.95556rem;
    height: 4.83556rem;
    margin-left: 1.42222rem; }

.nav {
  height: 3.55556rem;
  margin: 0.56889rem 0 2.13333rem;
  padding: 0 2.13333rem 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between; }
  .nav li {
    margin-top: 0.92444rem; }
    .nav li span {
      display: inline-block;
      line-height: 1.56444rem;
      font-size: 1.13778rem;
      color: #ffe2b7;
      letter-spacing: 0;
      margin-bottom: 0.21333rem; }
    .nav li i {
      display: none; }
    .nav li.nav_active span {
      color: #ffa217; }
    .nav li.nav_active i {
      display: block;
      margin: 0 auto;
      width: 2.27556rem;
      height: 0.42667rem;
      background-image: linear-gradient(135deg, #ffe3b2 2%, #ffa500 97%);
      border-radius: 0.21333rem; }

ul.nav_active {
  display: block; }

.list {
  margin-bottom: 6.25778rem;
  padding: 0 1.42222rem;
  display: none; }
  .list li {
    margin: 0 auto 1.84889rem;
    height: 8.53333rem;
    border-radius: 0.71111rem;
    position: relative; }
    .list li .lis_left {
      float: left;
      width: 2.70222rem;
      height: 2.70222rem;
      border-radius: 50%;
      background: #ffffff;
      margin-top: 10px;
      margin-left: 12px; }
    .list li .lis_right {
      float: left;
      margin-left: 0.71111rem;
      width: 18.91556rem;
      padding: 0.78222rem 0.64rem 0 0; }
      .list li .lis_right p.tit {
        height: 1.56444rem;
        margin-bottom: 0.99556rem;
        font-size: 1.13778rem; }
        .list li .lis_right p.tit b,
        .list li .lis_right p.tit span {
          display: block;
          color: #ffffff;
          letter-spacing: 0;
          float: left;
          font-weight: normal; }
        .list li .lis_right p.tit span {
          margin-left: 4.97778rem; }
          .list li .lis_right p.tit span i {
            padding-top: 0.28444rem;
            padding-left: 0.35556rem;
            height: 1.20889rem;
            font-size: 0.85333rem;
            color: #ffffff;
            letter-spacing: 0;
            font-style: normal; }
      .list li .lis_right p.txt {
        height: 1.20889rem;
        font-size: 0.85333rem;
        color: #ffffff;
        letter-spacing: 0;
        display: -webkit-box;
        line-height: 1.20889rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical; }
      .list li .lis_right div.passage {
        height: 0.35556rem;
        background: rgba(255, 255, 255, 0.4);
        margin: 0.78222rem 0 0.35556rem;
        border-radius: 0.21333rem;
        position: relative; }
        .list li .lis_right div.passage i {
          display: block;
          width: 5.9%;
          position: absolute;
          height: 0.35556rem;
          background: #ffffff;
          border-radius: 1.77778rem; }
      .list li .lis_right p.time {
        height: 1.20889rem;
        line-height: 1.20889rem;
        font-size: 0.85333rem; }
        .list li .lis_right p.time span {
          color: #fff;
          display: block; }
          .list li .lis_right p.time span:nth-child(1) {
            float: left; }
          .list li .lis_right p.time span:nth-child(2) {
            float: right; }
    .list li.lis_hot {
      background: linear-gradient(270deg, #ff8d8d 0%, #ffdc65 98%); }
      .list li.lis_hot i.hot {
        position: absolute;
        width: 2.48889rem;
        height: 2.48889rem;
        display: block;
        background: url("./bg_img/hot.png") no-repeat;
        top: 0;
        left: 0;
        background-size: 2.48889rem 2.48889rem; }
    .list li.lis_pur {
      background-image: linear-gradient(270deg, #bd76ff 2%, #ff9ac3 100%); }
      .list li.lis_pur div.passage i {
        width: 7.2%; }
    .list li.lis_blue {
      background-image: linear-gradient(270deg, #7f95ff 0%, #99d6ff 100%); }
      .list li.lis_blue div.passage i {
        width: 7.2%; }

.lis_b li::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.5;
  top: 0;
  left: 0;
  z-index: 10; }

.lis_c li {
  background-image: linear-gradient(90deg, #e4e4e4 5%, #d8d8d8 95%); }
  .lis_c li .passage {
    display: none; }
  .lis_c li div.lis_right p.time {
    margin-top: 1.06667rem;
    height: 1.77778rem; }
    .lis_c li div.lis_right p.time b {
      line-height: 1.77778rem;
      font-size: 1.28rem;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: normal; }
    .lis_c li div.lis_right p.time i {
      padding-top: 0.56889rem;
      padding-left: 0.71111rem;
      font-style: normal;
      height: 1.20889rem;
      line-height: 1.20889rem;
      font-size: 0.85333rem;
      color: #ffffff;
      letter-spacing: -0.6px; }
    .lis_c li div.lis_right p.time span {
      line-height: 1.77778rem; }
      .lis_c li div.lis_right p.time span:nth-child(2) {
        margin-right: 36px; }

.btoBar {
  width: 100%;
  height: 4.83556rem;
  background: #ffffff;
  box-shadow: inset 0px 2px 0px 0px #eeeeee;
  position: fixed;
  bottom: 0;
  z-index: 100; }
  .btoBar a {
    display: block;
    width: 33.3%;
    text-align: center;
    float: left;
    height: 4.83556rem; }
    .btoBar a i {
      display: block;
      width: 1.70667rem;
      height: 1.70667rem;
      margin: 0.71111rem auto 0.21333rem; }
    .btoBar a:nth-child(1) i {
      background: url("./bg_img/candy.png") no-repeat center center;
      background-size: 1.42222rem 1.70667rem; }
    .btoBar a:nth-child(2) i {
      background: url("./bg_img/wa.png") no-repeat center center;
      background-size: 1.70667rem 1.70667rem; }
    .btoBar a:nth-child(3) i {
      background: url("./bg_img/user.png") no-repeat center center;
      background-size: 1.56444rem 1.70667rem; }
    .btoBar a span {
      height: 1.42222rem;
      line-height: 1.42222rem;
      font-size: 0.99556rem;
      color: #b2b2b2; }
    .btoBar a.active span {
      color: #ffa217; }
    .btoBar a.active:nth-child(1) i {
      background: url("./bg_img/candy2.png") no-repeat center center;
      background-size: 1.42222rem 1.70667rem; }
    .btoBar a.active:nth-child(2) i {
      background: url("./bg_img/wa2.png") no-repeat center center;
      background-size: 1.70667rem 1.70667rem; }
    .btoBar a.active:nth-child(3) i {
      background: url("./bg_img/user2.png") no-repeat center center;
      background-size: 1.56444rem 1.70667rem; }

.det_mainBox {
  padding: 0.56889rem 1.42222rem 0.71111rem;
  margin-top: 0.99556rem; }
  .det_mainBox .det_main {
    height: 11.09333rem;
    background-image: linear-gradient(270deg, #ff8d8d 0%, #ffdc65 98%);
    box-shadow: 0 0.14222rem 0.56889rem 0 rgba(255, 174, 119, 0.5);
    border-radius: 0.71111rem;
    box-sizing: border-box;
    padding: 0.71111rem 0.64rem 0 0.85333rem;
    position: relative; }
    .det_mainBox .det_main .dmain_btn {
      width: 8.60444rem;
      height: 3.2rem;
      line-height: 3.2rem;
      position: absolute;
      bottom: -1.56444rem;
      text-align: center;
      font-size: 0.99556rem;
      color: #666666;
      left: 50%;
      margin-left: -4.26667rem;
      opacity: 0.96;
      background: #ffffff;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
      border-radius: 22px; }
    .det_mainBox .det_main .dmain_tx {
      width: 2.70222rem;
      height: 2.70222rem;
      background: #fff;
      border-radius: 50%;
      float: left; }
    .det_mainBox .det_main .dmain_right {
      margin-left: 0.71111rem;
      float: left;
      width: 18.91556rem; }
      .det_mainBox .det_main .dmain_right .dmain_tit {
        display: block;
        height: 1.56444rem;
        font-size: 1.13778rem;
        color: #ffffff;
        margin-bottom: 0.99556rem; }
      .det_mainBox .det_main .dmain_right .dmain_txt {
        height: 1.20889rem;
        font-size: 0.85333rem;
        color: #ffffff;
        letter-spacing: 0;
        display: -webkit-box;
        line-height: 1.20889rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-bottom: 0.78222rem; }
      .det_mainBox .det_main .dmain_right div.passage {
        height: 0.35556rem;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 0.21333rem;
        position: relative; }
        .det_mainBox .det_main .dmain_right div.passage::before {
          content: "";
          width: 1.56444rem;
          position: absolute;
          height: 0.35556rem;
          background: #ffffff;
          border-radius: 1.77778rem; }
      .det_mainBox .det_main .dmain_right .dmain_time {
        margin-top: 0.35556rem;
        height: 1.20889rem;
        font-size: 0.85333rem;
        color: #ffffff; }
        .det_mainBox .det_main .dmain_right .dmain_time span {
          display: block;
          float: left; }
          .det_mainBox .det_main .dmain_right .dmain_time span:nth-child(2) {
            float: right; }

.det_nav {
  margin-top: 1.56444rem;
  height: 3.55556rem; }
  .det_nav div {
    margin-top: 1.20889rem;
    height: 1.20889rem; }
    .det_nav div i {
      display: block;
      width: 1.42222rem;
      height: 1.20889rem;
      float: left; }
    .det_nav div span {
      display: block;
      float: left; }

.wa_nav {
  margin-top: 3.12889rem;
  height: 3.55556rem;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center; }
  .wa_nav div:nth-child(1) {
    margin-right: 3.48444rem; }
  .wa_nav div span {
    display: inline-block;
    height: 2.48889rem;
    line-height: 2.48889rem;
    letter-spacing: -0.06116rem;
    font-size: 1.13778rem;
    color: #999999; }
  .wa_nav div i {
    display: none; }
  .wa_nav div.wa_active span {
    letter-spacing: 0;
    font-size: 1.28rem;
    color: #000000; }
  .wa_nav div.wa_active i {
    display: block;
    margin: 0.42667rem auto 0;
    width: 2.27556rem;
    height: 0.35556rem;
    background-image: linear-gradient(90deg, #03f6f9 0%, #03b4f9 98%);
    border-radius: 1.77778rem; }

.wa_ul {
  margin-top: 0.21333rem;
  margin-bottom: 3.55556rem;
  padding: 0 0.49778rem;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap; }
  .wa_ul li {
    width: 50%;
    padding: 0.49778rem;
    box-sizing: border-box; }
    .wa_ul li .li_bg {
      height: 22.47111rem;
      background: #ffffff;
      box-shadow: 0 0.14222rem 0.56889rem 0 rgba(0, 0, 0, 0.07);
      border-radius: 0.71111rem; }
